<template>
  <div class="tw-header-index-jx" :style="{'width':widthHead,'margin':'0 auto'}">
    <div class="tw-index-header-item">
      <img src="@/assets/images/pic--school.png">
      <div class="ml-tiny">
        <div class="tw-index-header-item-title">学校数量</div>
        <div class="digi tw-index-header-title">{{$reformNumber(schoolNumSum)}}</div>
        <!-- <div class="digi tw-index-header-title">{{headerData.schoolNumber}}</div> -->
      </div>
    </div>
    <div class="tw-index-header-item">
      <img src="@/assets/images/pic-student-60.png">
      <div class="ml-tiny">
        <div class="tw-index-header-item-title">在校学生</div>
        <div class="digi tw-index-header-title">{{$reformNumber(stuNumSum)}}</div>
        <!-- <div class="digi tw-index-header-title">{{headerData.studentNumber}}</div> -->
      </div>
    </div>
    <div class="tw-index-header-item">
      <img src="@/assets/images/pic-teacher-60.png">
      <div class="ml-tiny">
        <div class="tw-index-header-item-title">专任教师</div>
        <div class="digi tw-index-header-title">{{$reformNumber(teaNumSum)}}</div>
        <!-- <div class="digi tw-index-header-title">{{headerData.teacherNumber}}</div> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props:['widthHead','schoolNumSum','stuNumSum','teaNumSum'],
  name: 'tw-midhead',
  data () {
    return {
      headerData: {
        schoolNumber: 0,
        studentNumber: 0,
        teacherNumber: 0
      }
    }
  },
  created () {
    let vm = this
    // vm.$axios.get('/static/weishidataview/jsondata/indexgongshu.json', {
    //   baseURL: ''
    // }).then((resp) => {
    //   // 中间数据
    //   vm.headerData = resp.data.headerData
    // })
    let queryData = {
      tjnf: '2019'
    }
    // vm.app_jxszhjy_fwnlfx_xsjsxxzs(queryData)
  },
  methods: {
    // 服务能力分析-学生,教师,学校汇总
    // app_jxszhjy_fwnlfx_xsjsxxzs (queryData) {
    //   let vm = this
    //   vm.$axios
    //     .post('tw-cloud-datatheme-server/customthemedata/app_jxszhjy_fwnlfx_xsjsxxzs', queryData)
    //     .then(
    //       (response) => {
    //         if (response.data.pageInfo && response.data.pageInfo.list.length > 0) {
    //           response.data.pageInfo.list.forEach(item => {
    //             if (item.xszs) {
    //               vm.headerData.studentNumber = vm.$reformNumber(item.xszs)
    //             }
    //             if (item.xxzs) {
    //               vm.headerData.schoolNumber = vm.$reformNumber(item.xxzs)
    //             }
    //             if (item.jszs) {
    //               vm.headerData.teacherNumber = vm.$reformNumber(item.jszs)
    //             }
    //           })
    //         }
    //       },
    //       (response) => {
    //         console.log('error')
    //       }
    //     )
    // }
  }
}
</script>

<style lang="scss">
.tw-header-index-jx{
  display: flex;
  justify-content: space-around;
  align-items: center;
  min-height: 90px;

  .tw-index-header-item{
    display: flex;

    .tw-index-header-item-title{
      font-size:18px ;
    }
  }

  .ml-tiny{
    display: inline-block;
    margin-left: 10px !important;
  }

  .tw-index-header-title{
    font-size:28px;
    color: #0ffdfd !important;
  }
}
</style>
